<script setup lang="ts">
import { onMounted } from 'vue';

import { toChineseNumber } from './format-map-data.js';

import { Select as ASelect } from 'ant-design-vue';
const ASelectOption = ASelect.Option;

const props = defineProps({
  classSelf: {
    type: Object
  }
});

async function administrativeChange(item) {
  item = JSON.parse(item);
  props.classSelf.administrativeSelect(item);
}

function isCollapseVisible(mapTypeName) {
  if (props.classSelf.state.mapType == '2dOne' && mapTypeName.includes('2D')) {
    return true;
  } else if (props.classSelf.state.mapType == '3dOne' && mapTypeName.includes('3D')) {
    return true;
  } else if (props.classSelf.state.mapType == '2d3dSingle' || props.classSelf.state.mapType == '2d3dDual') {
    return true;
  } else {
    return false;
  }
}

onMounted(async () => {});

function getLayerIndex(layerIndex, animationIndex) {
  return 'layerIndex-' + (((typeof layerIndex === 'number' ? layerIndex : 0) + (animationIndex + 1 || 0)) % 2);
}
</script>
<template>
  <a-collapse :class="[props.classSelf.mapIsMobile() ? 'method-mobile' : 'method']">
    <template
      v-for="(item, index) in [
        {
          mapTypeName: '3D',
          name: '波士顿',
          buttonList: [{ clickKey: 'bostonClickType', clickObject: { text: '波士顿' } }]
        },
        {
          mapTypeName: '2D & 3D',
          name: '撒点',
          buttonList: [
            { clickKey: 'pointClickType', clickObject: { type: '批量绘制点标记', text: '撒点', layerIndex: 0 } },
            { clickKey: 'pointClickType', clickObject: { type: '清除所有', text: '清除', layerIndex: 0 } }
          ]
        },
        {
          mapTypeName: '2D & 3D',
          name: '热力图',
          buttonList: [
            { clickKey: 'heatMapClickType', clickObject: { type: '添加热力图', layerIndex: 6 } },
            { clickKey: 'heatMapClickType', clickObject: { type: '清除热力图', layerIndex: 6 } }
          ]
        },
        {
          mapTypeName: '2D & 3D',
          name: '飞行',
          buttonList: [
            {
              clickKey: 'positionClickType',
              clickObject: { type: '根据经度、纬度和缩放级别飞行' },
              text: 'longitude、latitude、zoom'
            },
            {
              clickKey: 'positionClickType',
              clickObject: { type: '根据经度和纬度范围飞行' },
              text: 'west、south、east、north'
            },
            { clickKey: 'positionClickType', clickObject: { type: '自定义飞行时间' }, text: 'duration' },
            { clickKey: 'positionClickType', clickObject: { type: '瞬间飞行' }, text: 'duration 取 0' },
            { clickKey: 'positionClickType', clickObject: { type: '飞行到初始位置' } }
          ]
        },
        {
          mapTypeName: '2D & 3D',
          name: '放大缩小',
          buttonList: [
            { clickKey: 'viewClickType', clickObject: { type: '放大' } },
            { clickKey: 'viewClickType', clickObject: { type: '缩小' } }
          ]
        },
        {
          mapTypeName: '2D & 3D',
          name: '坐标获取',
          buttonList: [{ clickKey: 'viewClickType', clickObject: { type: '获取当前位置坐标' } }]
        },
        {
          mapTypeName: '2D & 3D',
          name: '坐标转换',
          buttonList: [{ clickKey: 'viewClickType', clickObject: { type: 'cgcs2000坐标转换为bd09、gcj02坐标' } }]
        }
      ]"
    >
      <template v-if="isCollapseVisible(item.mapTypeName)">
        <a-collapse-panel :header="`${toChineseNumber(index + 1)}. ${item.name}：`" :key="index" class="method-button">
          <template v-for="pItem in item.pList || []">
            <p>{{ pItem }}</p>
          </template>
          <template v-for="pButtonItem in item.pButtonList || []">
            <p>
              <a-button type="dashed" @click="props.classSelf[pButtonItem.clickKey](pButtonItem.clickObject)">
                {{ pButtonItem.text }}
              </a-button>
            </p>
          </template>
          <template v-for="(buttonItem, buttonIndex) in item.buttonList || []">
            <p :class="getLayerIndex(buttonItem.clickObject.layerIndex, buttonItem.clickObject.animationIndex)">
              <a-button
                type="dashed"
                :class="getLayerIndex(buttonItem.clickObject.layerIndex, buttonItem.clickObject.animationIndex)"
                @click="props.classSelf[buttonItem.clickKey](buttonItem.clickObject)"
              >
                {{
                  `${index + 1}.${buttonIndex + 1}` +
                  '&ensp;' +
                  (buttonItem.clickObject.text == null ? buttonItem.clickObject.type : buttonItem.clickObject.text)
                }}
                <template v-if="buttonItem.clickObject.innerCount != null">
                  <span>，{{ buttonItem.clickObject.innerCount }} 个镂空</span>
                </template>
                <template v-if="buttonItem.clickObject.text == null && buttonItem.clickObject.animationIndex != null">
                  {{ '，动画序号 ' + buttonItem.clickObject.animationIndex }}
                </template>
                <template v-else-if="buttonItem.clickObject.text == null && buttonItem.clickObject.layerIndex != null">
                  {{ '，在绘制图层 ' + buttonItem.clickObject.layerIndex }}
                </template>
              </a-button>
              <template v-if="buttonItem.text != null">
                <br />
                <span>{{ buttonItem.text }}</span>
              </template>
            </p>
          </template>
        </a-collapse-panel>
      </template>
    </template>
  </a-collapse>
</template>
